<template>
	<view class="layout">
		<view class="left">
			<view class="item" v-if="barType == 0">
				<uni-icons type="redo" size="28" color="#999"></uni-icons>
				<text></text>
			</view>
			<view class="item" v-else-if="barType == 1" @click="showPopup">
				<view class="input">评价一下...</view>
			</view>

		</view>
		<view class="right">
			<view class="item">
				<uni-icons v-if="clicked" type="heart" size="28" color="#999"></uni-icons>
				<uni-icons v-else type="heart-fill" size="28" color="#999"></uni-icons>
				<text>1</text>
			</view>
			<view class="item">
				<uni-icons v-if="clicked" type="star" size="28" color="#999"></uni-icons>
				<uni-icons v-else type="star-fill" size="28" color="#999"></uni-icons>
				<text>12</text>
			</view>
			<view class="item">
				<uni-icons v-if="clicked" type="chatbubble" size="28" color="#999"></uni-icons>
				<uni-icons v-else type="chatbubble-fill" size="28" color="#999"></uni-icons>
				<text>12</text>
			</view>

			<view class="item" v-if="barType==1">
				<uni-icons type="redo" size="28" color="#999"></uni-icons>
				<text></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const clicked = ref(true)
	defineProps({
		barType: {
			type: Number,
			default: 0
		}
	})
	const emits = defineEmits(['click'])

	const commentPopup = ref(null)

	const showPopup = () => {
		emits('click')
	}
</script>

<style lang="scss" scoped>
	.layout {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 130rpx;

		.item {
			display: flex;
			align-items: center;
			padding: 10rpx 15rpx;
			color: #999;

			.input {
				width: 100%;
				height: 70rpx;
				background-color: #f7f7f7;
				border-radius: 70rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;

			}
		}

		.left {
			flex: 1;
			margin-right: 15rpx;

			.item {
				padding-left: 0;
			}
		}

		.right {
			display: flex;

			.item:last-child {
				padding-right: 0;
			}
		}
	}
</style>